<template>
	<view class="my-point">
		<u-navbar title=" " bgColor="transparent" :autoBack="true">
			<view slot="left"><uni-icons type="left" size="16" color="#fff"></uni-icons></view>
			<view slot="center" style="color:#fff">
				我的邀请
			</view>
		</u-navbar>
		<view class="top flex_shu" :style="{background:`url(${imgUrl}pointBg.png) no-repeat`}">
			<view class="topTitle">
				邀好友·赚积分
			</view>
			<view class="titleTwo">
				邀请越多·赚的越多
			</view>
			<view class="qrBox">
				<!-- <uv-qrcode ref="qrcode" value="https://h5.uvui.cn" :options="options" size='468rpx'></uv-qrcode> -->
				<yz-qr :qrPath.sync="qrPath" :text="text" :size="size" :quality="quality" :colorDark="colorDark"
					:colorLight="colorLight" class="qrImg"></yz-qr>
			</view>

			<view class="posterBtn" @click="creatCanvas">
			</view>

			<view class="pointBox">
				<view class="pointTitle flex_heng" :style="{background:`url(${imgUrl}pointtitleBg.png) no-repeat`}">
					<text>我的收益</text>
				</view>
				<view class="incomeBox flex_shu">
					<view class="incomeParice">
						{{allIntegral.integralProfit?allIntegral.integralProfit:0}}
					</view>
					<view class="incomeText">
						邀请人数：{{allIntegral.integralTotal}}
					</view>
					<view class="incomeBtm">
						邀请用户下单·分享小程序
					</view>
				</view>
				<view class="pointBoxCon">
					<view class="pointBoxTitle">
						邀请返现记录
					</view>
					<view class="pointItemTitle flex_heng">
						<view class="one">
							我的好友
						</view>
						<view class="one">
							消费金额
						</view>
						<view class="two">
							获得积分
						</view>
					</view>
					<view class="pointItem flex_heng" v-for="(item,index) in integralList" :key="index">
						<view class="pointLeft flex_shu">
							<view class="u-line-1">
								{{item.type == 1?'购物':item.type == 2?'邀请好友':'兑换'}}
							</view>
						</view>
						<view class="pointMid">
							{{item.price}}
						</view>
						<view class="pointRight flex_heng">
							{{item.integral}}
						</view>
					</view>
				</view>
			</view>

		</view>
	</view>
</template>

<script>
	import {
		getUserInfo,
		getTypeList,
		getIntegralList
	} from '@/api/api.js'
	export default {
		data() {
			return {
				imgUrlTwo: this.$imgUrlTwo,
				imgUrl: this.$imgUrl,
				allIntegral: {},
				page: 1,
				total: 0,
				sortId: '',
				integralList: [],

				posterUrl: '', // 存储生成的海报图片路径
				vscodeImg: "",
				canvasMultiple: 2,
				posterImage: '',
				qrImgUrl: "",
				userInfo: {},
				qrPath: '',
				text: '',
				size: 220,
				quality: 'L',
				colorDark: '#000000',
				colorLight: '#ffffff',
				imagePath: ''
			}
		},
		onShow() {
			this.getUserInfo();
			this.getIntegralList();
			this.text = `https://sdgchx.com/qrCode?pid=${uni.getStorageSync('userInfo').id}`
		},
		onReady() {
			// this.shengchengCode()
		},
		methods: {
			async creatCanvas() {
				console.log('this.qrPath', this.qrPath)
				if (this.posterImage) return
				// 创建canvas对象
				uni.showLoading({
					title: '海报生成中'
				})
				uni.saveImageToPhotosAlbum({
					filePath: this.qrPath,
					success: function() {
						console.log('save success');
						uni.showToast({
							title: '保存成功',
							icon: 'none'
						})
					}
				});
				// this.canvas = uni.createCanvasContext('canvas', this)
				// // 这里是我自己的方法下载图片
				// // canvas中的插入的图片不能是网络地址只能是下载到本地的
				// const qrCode = this.qrPath
				// const imgBg = this.imagePath
				// const {
				// 	canvasMultiple,
				// 	rpxToPx
				// } = this
				// // 插入背景图 第2 3 4 5参数单位是px的所以我们要做适配 rpx转换为px 可以自定义方法 也可以使用uniapp中的方法
				// this.canvas.drawImage(imgBg, 0, 0, rpxToPx(590 * canvasMultiple), rpxToPx(976 * canvasMultiple))
				// // 计算二维码水平位置
				// let canvasWidth = rpxToPx(590 * canvasMultiple); // Canvas 宽度
				// let qrCodeWidth = rpxToPx(180 * canvasMultiple); // 二维码宽度
				// let x = (canvasWidth - qrCodeWidth) / 2; // 计算二维码水平位置
				// // 计算新的垂直位置
				// let y = rpxToPx(780 * canvasMultiple) - rpxToPx(160); // 原始垂直位置减去 100rpx
				// // 将二维码插入到 Canvas 中，水平居中显示
				// this.canvas.drawImage(qrCode, x, y, qrCodeWidth, rpxToPx(180 * canvasMultiple));


				// // 成功之后
				// this.canvas.draw(true, () => {
				// 	setTimeout(() => {
				// 		// 将canvas转换成图片
				// 		uni.canvasToTempFilePath({
				// 			x: 0,
				// 			y: 0,
				// 			canvasId: 'canvas',
				// 			fileType: 'png',
				// 			quality: 1,
				// 			success: (success) => {
				// 				console.log('success', success)
				// 				this.posterImage = success.tempFilePath
				// 				uni.hideLoading()
				// 				// this.canvas.draw()
				// 				this.savePoster()
				// 			},
				// 			fail: (e) => {
				// 				uni.showToast({
				// 					title: '海报生成失败',
				// 					icon: 'none'
				// 				})
				// 				this.close()
				// 				console.log('eeee', e)
				// 			}
				// 		}, this)
				// 	}, 500)
				// })
			},
			rpxToPx(rpx) {
				return (rpx / 750) * uni.getSystemInfoSync().windowWidth
			},
			savePoster() {
				console.log('savePoster', this.posterImage)
				uni.saveImageToPhotosAlbum({
					filePath: this.posterImage,
					success: () => {
						uni.hideLoading();
						uni.showToast({
							title: '保存成功',
							icon: 'none'
						})
					},
					fail: () => {
						uni.hideLoading()
						this.$toast({
							title: '相册功能未授权，无法保存'
						})
					},
					complete: () => {

					}
				})
			},


			downloadImage() {
				const imageUrl = 'https://side001.obs.cn-south-1.myhuaweicloud.com/upload/20240816/1723794465393.jpg'; // 网络图片地址
				uni.showLoading({
					title: '海报生成中'
				})
				uni.downloadFile({
					url: imageUrl,
					success: (res) => {
						if (res.statusCode === 200) {
							this.imagePath = res.tempFilePath;
							uni.hideLoading()
							// this.drawImage(ctx);
						}
					},
					fail: () => {
						console.log('下载失败');
					},
				});
			},
			// shengchengCode(){
			// 	// 获取uQRCode实例
			// 	var qr = new UQRCode();
			// 	// 设置二维码内容
			// 	qr.data = "https://uqrcode.cn/doc";
			// 	// 设置二维码大小，必须与canvas设置的宽高一致
			// 	qr.size = 200;
			// 	// 调用制作二维码方法
			// 	qr.make();
			// 	// 获取canvas上下文
			// 	var canvasContext = uni.createCanvasContext('qrcode', this); // 如果是组件，this必须传入
			// 	// 设置uQRCode实例的canvas上下文
			// 	qr.canvasContext = canvasContext;
			// 	// 调用绘制方法将二维码图案绘制到canvas上
			// 	qr.drawCanvas();
			// },
			//获取积分
			goGetPoint() {
				uni.navigateTo({
					url: '/package/pages/getPoint/getPoint'
				})
			},

			getUserInfo() {
				getUserInfo().then(res => {
					console.log(res);
					this.userInfo = res.data
				})
			},

			getIntegralList(userIntegral) {
				const params = {
					type: 2, //积分
				}
				getIntegralList({
					params
				}).then(res => {
					if (res.code == 200) {
						this.allIntegral = res.data
						if (res.rows.length > 0) {
							this.integralList = [...this.integralList, ...res.rows];
						}
					}
				}).finally(() => {
					this.moreStatus = 'nomore'
				})
			},

			scrolltolower() {
				console.log('到底了');
				this.page += 1
				this.moreStatus = 'loadmore'
				if (this.sortCurrent === 1) {
					this.getIntegralList({
						userIntegral: this.userInfo.integral
					})
				} else {
					this.getIntegralList({})
				}
			},
		}
	}
</script>

<style lang="scss">
	.my-point {
		width: 100%;
		height: 100vh;
		background: #f6f6f6;
		// position: relative;

		.top {
			width: 100%;
			height: 2210rpx;
			background-size: 100% 100% !important;
			padding-top: 186rpx;
			box-sizing: border-box;
			font-family: "Alibaba PuHuiTi 2.0";
			justify-content: flex-start;

			.topTitle {
				background-image: linear-gradient(to bottom, #FFFFFF, #FFD392);
				-webkit-background-clip: text;
				color: transparent;
				text-align: center;
				font-size: 102rpx;
				font-weight: 900;
				letter-spacing: 2rpx;
			}

			.titleTwo {
				color: #ffffff;
				text-align: center;
				font-size: 28rpx;
				font-weight: 500;
				font-family: "Alibaba PuHuiTi 2.0"
			}

			.qrBox {
				width: 466rpx;
				height: 468rpx;
				border-radius: 2rpx;
				opacity: 1;
				background: #ffffff;
				margin-top: 28rpx;
			}

			.posterBtn {
				width: 194rpx;
				height: 48rpx;
				line-height: 48rpx;
				margin-top: 50rpx;
			}

			.pointBox {
				width: 694rpx;
				border-radius: 16rpx;
				opacity: 1;
				background: #FFF4F3;
				padding: 28rpx;
				box-sizing: border-box;
				position: relative;
				margin-top: 200rpx;

				.pointTitle {
					width: 328rpx;
					height: 64rpx;
					justify-content: center;
					align-items: center;
					position: absolute;
					top: 0;
					left: 50%;
					transform: translate(-50%, -25%);
					background-size: 100% 100% !important;

					text {
						color: #ffffff;
						text-align: center;
						font-size: 40rpx;
						font-weight: 500;
					}
				}

				.incomeBox {
					width: 100%;
					height: 298rpx;
					border-radius: 16rpx;
					margin-top: 40rpx;
					opacity: 1;
					background: #ffffff;
					font-family: "Alibaba PuHuiTi 2.0";
					justify-content: space-evenly;

					.incomeParice {
						color: #f6260a;
						text-align: center;
						font-size: 72rpx;
						font-weight: 500;
					}

					.incomeText {
						color: #999999;
						text-align: center;
						font-size: 24rpx;
						font-weight: 400;
					}

					.incomeBtm {
						width: 574rpx;
						height: 76rpx;
						line-height: 76rpx;
						border-radius: 40rpx;
						opacity: 1;
						background: linear-gradient(180deg, #ef4121 0%, #ef3147 100%);
						color: #ffffff;
						text-align: center;
						font-size: 32rpx;
						font-weight: 500;
					}

				}

				.pointBoxCon {
					width: 100%;
					// height: 438rpx
					margin-top: 28rpx;
					border-radius: 16rpx;
					opacity: 1;
					background: #ffffff;
					padding: 24rpx;
					box-sizing: border-box;

					.pointBoxTitle {
						width: 100%;
						text-align: center;
						color: #333333;
						font-size: 32rpx;
						font-weight: 500;
					}

					.pointItemTitle {
						width: 100%;
						height: 130rpx;
						justify-content: space-between;

						.one {
							color: #999999;
							text-align: center;
							font-size: 28rpx;
							font-weight: 400;
							font-family: "Alibaba PuHuiTi 2.0";
						}

						.two {
							color: #EF3147;
							text-align: center;
							font-size: 28rpx;
							font-weight: 400;
							font-family: "Alibaba PuHuiTi 2.0";
						}
					}

					.pointItem {
						width: 100%;
						height: 60rpx;
						justify-content: space-between;
						border-bottom: 1rpx solid #dedede;

						.pointLeft {
							height: 60rpx;
							color: #999999;
							text-align: center;
							font-size: 28rpx;
							font-weight: 400;
							font-family: "Alibaba PuHuiTi 2.0";
						}

						.pointMid {
							height: 60rpx;
							color: #999999;
							text-align: center;
							font-size: 28rpx;
							font-weight: 400;
							font-family: "Alibaba PuHuiTi 2.0";
						}

						.pointRight {
							height: 60rpx;
							color: #EF3147;
							text-align: center;
							font-size: 28rpx;
							font-weight: 400;
							font-family: "Alibaba PuHuiTi 2.0";
						}
					}
				}

			}
		}

	}
</style>